---
id: paper
title: Paper
sidebar_label: Paper
---

The `Paper` component is a simple and versatile component used to display content within a flat or elevated surface. This makes it useful as a building block for various UI sections such as cards, dialogues, or panels.

## Usage

To use the `Paper` component, import it from your components. You can pass children, an optional `style`, and an optional `className` prop for additional styling.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic Paper

Simple example of using the `Paper` component to create a basic surface for content.

import PaperBasicDemo from '../../samples/components/paper/paper_basic';
import PaperBasicSource from '!!raw-loader!../../samples/components/paper/paper_basic';

<CodeSample>
    <PaperBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{PaperBasicSource}</CodeBlock>

## Customized Paper

Illustrates how to customize the `Paper` component by passing `style` and `className` props.

import PaperCustomizedDemo from '../../samples/components/paper/paper_customized';
import PaperCustomizedSource from '!!raw-loader!../../samples/components/paper/paper_customized';

<CodeSample>
    <PaperCustomizedDemo/>
</CodeSample>

<CodeBlock language="tsx">{PaperCustomizedSource}</CodeBlock>